<template>
  <div class="common-layout">
    <!-- title query -->
    <title-section :titleName="'产品检验单'" :queryPlaceholder="'产品检验订单编号'" @query-change="queryChange">
      <!-- <template #queryCom>
        <el-input
          v-model="form.ProcessName"
          clearable
          style="width: 150px;"
          placeholder="工序名称"
        />
      </template> -->
      <template #btnCom>
        <el-button type="primary" @click="addChange">
          <i class="el-icon-plus"></i>添加
        </el-button>
        <el-button type="warning" @click="auditChange(1)"
          ><i class="el-icon-video-play"></i>审批通过</el-button>
        <!-- <el-button type="warning" @click="auditChange(0)"
          ><i class="el-icon-video-play"></i>审批不通过</el-button
        > -->
      </template>
    </title-section>
    <!-- table -->
    <div class="table-info mes-table">
      <data-table
        ref="dataTableRef"
        :tableKey="tableKey"
        :isOperation="true"
        @sort-change="sortChange"
        @table-selection-change="tableSelectionChange"
      >
        <template #productInspectionCode="{ row }">
          <el-link type="primary" @click="detailChange(row)">{{ row.productInspectionCode }}</el-link>
        </template>
        <template #status="{ row }">
          <el-tag :type="getAuditStatus(row.status).type">
            {{ getAuditStatus(row.status).info }}</el-tag
          >
        </template>
        <template #operationBtn="{ row }">
          <span
            style="cursor: pointer; color: #409eff; margin-right: 10px"
            @click="detailChange(row)"
            >详情</span
          >
          <span
            style="cursor: pointer; color: #e6a23c; margin-right: 10px"
            @click="updateChange(row)"
            >修改</span
          >
          <el-popconfirm
            placement="bottom-end"
            popper-class="my-popper-delete"
            title="是否确认删除该行数据"
            @confirm="deleteChange(row)"
          >
            <template #reference>
              <span class="pointer" style="color: #f54346">删除</span>
            </template>
          </el-popconfirm>
        </template>
      </data-table>
      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="[15, 30, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 添加 -->
    <dialog-com
      ref="addDialogComRef"
      :title="addTitle"
      :width="'80%'"
      class="add-dialog"
      @confirm-change="confirmChange"
      @close-change="closeChange"
    >
      <template #content>
        <add-form ref="addFormRef" @pass-verification-change="okChange"></add-form>
      </template>
      <template #dialogBtn>
        <el-button v-if="detailInfo.productInspectionId" :disabled="!(detailInfo.status === 1 && detailInfo.unQualifiedQuantity > 0)" type="warning" @click="orderReworkChange(1)">返工</el-button>
        <el-button v-if="detailInfo.productInspectionId" :disabled="!(detailInfo.status === 1 && detailInfo.unQualifiedQuantity > 0)" type="danger" @click="orderReworkChange(2)">报废</el-button>
      </template>
    </dialog-com>
    <!-- 返工 报废 -->
    <dialog-com
      ref="orderReworkDialogComRef"
      :title="orderReworkTitle"
      :width="400"
      class="add-dialog"
      @confirm-change="confirmOrderReworkChange"
      @close-change="closeOrderReworkChange"
    >
      <template #content>
        <el-input-number
          v-model.trim="orderReworkNumber"
          :min="1"
          :precision="2"
          :max="detailInfo.unQualifiedQuantity"
          :placeholder="`请输入${orderReworkTitle}数量`"
          style="width: 100%;"
        />
      </template>
    </dialog-com>
  </div>
</template>

<script>
import TitleSection from "../../componentsNew/TitleSection.vue";
import DataTable from "../../componentsNew/DataTable.vue";
import DialogCom from "../../componentsNew/DialogCom.vue";
import AddForm from "./ProductInspectionFormCom/AddForm.vue"

import { myMethod } from "../../uitils/productInspectionForm.js";
export default {
  components: {
    TitleSection,
    DataTable,
    DialogCom,
    AddForm,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 15,
      totalPage: 0,
      tableKey: [
        {
          value: "productInspectionCode",
          name: "产品检验订单编号",
          minWidth: "250",
          sortable: false,
          slot: true,
        },
        { value: "productInspectionTime", name: "检验时间", minWidth: "250" },
        {
          value: "inspectionName",
          name: "抽检人名称",
          minWidth: "120",
        },
        {
          value: "status",
          name: "单据状态",
          minWidth: "150",
          slot: true,
        },
        {
          value: "remark",
          name: "备注",
          minWidth: "250",
        }
      ],
      tableSelection: [],
      form: {},
      selectAuditType: 1, // 1 审核通过   0 审核不通过
      addTitle: '添加产品检验单',
      detailInfo: {},
      orderReworkNumber: null,
      orderReworkTitle: '返工'
    };
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    ...myMethod,
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/index.less";
</style>
